<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animación de Corazones</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            position: relative;
        }
        
        .heart {
            position: absolute;
            font-size: 20px;
            color: pink;
            animation: float 5s linear infinite, glow 1.5s ease-in-out infinite alternate;
            z-index: 1;
        }
        
        .text-container {
            position: relative;
            z-index: 2;
        }
        
        .love-text {
            font-family: 'Arial', sans-serif;
            font-size: 5rem;
            font-weight: bold;
            color: lightblue;
            text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue;
            animation: pulse 2s ease-in-out infinite;
            text-align: center;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
            }
        }
        
        @keyframes glow {
            0% {
                text-shadow: 0 0 5px #ff69b4, 0 0 10px #ff69b4;
                opacity: 0.7;
            }
            100% {
                text-shadow: 0 0 20px #ff69b4, 0 0 30px #ff69b4, 0 0 40px #ff69b4;
                opacity: 1;
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                text-shadow: 0 0 10px lightblue, 0 0 20px lightblue;
            }
            50% {
                transform: scale(1.1);
                text-shadow: 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px lightblue;
            }
            100% {
                transform: scale(1);
                text-shadow: 0 0 10px lightblue, 0 0 20px lightblue;
            }
        }
    </style>
</head>
<body>
    <div class="text-container">
        <div class="love-text">I LOVE U</div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Crear corazones flotantes
            function createHearts() {
                const heartCount = 100; // Cantidad de corazones
                
                for (let i = 0; i < heartCount; i++) {
                    setTimeout(() => {
                        const heart = document.createElement('div');
                        heart.classList.add('heart');
                        heart.innerHTML = '❤';
                        
                        // Posición inicial aleatoria
                        const startPosX = Math.random() * window.innerWidth;
                        const startPosY = window.innerHeight + Math.random() * 100;
                        
                        // Tamaño aleatorio
                        const size = Math.random() * 30 + 10;
                        
                        // Duración aleatoria
                        const duration = Math.random() * 5 + 5;
                        
                        // Establecer propiedades
                        heart.style.left = `${startPosX}px`;
                        heart.style.top = `${startPosY}px`;
                        heart.style.fontSize = `${size}px`;
                        heart.style.animationDuration = `${duration}s, 1.5s`;
                        
                        // Agregar opacidad aleatoria
                        heart.style.opacity = Math.random() * 0.3 + 0.7;
                        
                        // Hacer brillar en diferentes intensidades
                        const glowIntensity = Math.floor(Math.random() * 3);
                        heart.style.filter = `brightness(${1 + glowIntensity * 0.5})`;
                        
                        document.body.appendChild(heart);
                        
                        // Eliminar corazones después de su animación
                        setTimeout(() => {
                            heart.remove();
                        }, duration * 1000);
                    }, i * 100); // Crea corazones con un pequeño retraso entre ellos
                }
            }
            
            // Crear corazones iniciales
            createHearts();
            
            // Continuar creando corazones
            setInterval(createHearts, 5000);
        });
    </script>
</body>
</html>